<template>
  <div class="app-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a @click="goToCourse">课程</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span>{{ courseName || '课程详情' }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="阶段信息" name="stage">
        <stage-component :course-id="courseId" :course-name="courseName" />
      </el-tab-pane>
      <el-tab-pane label="学生关联信息" name="join">
        <join-component :course-id="courseId" />
      </el-tab-pane>
      <!-- <el-tab-pane label="课程案例" name="case">
        <case-component :course-id="courseId" :course-name="courseName" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import StageComponent from '../stage/index.vue';
import JoinComponent from '../join/index.vue';

const route = useRoute();
const router = useRouter();
const courseId = ref(route.query.id);
const courseName = ref(route.query.courseName);
const activeTab = ref('stage');

function handleTabChange(tabName) {
  activeTab.value = tabName;
}

function goToCourse() {
  router.push('/coursemanagement/course');
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
  padding: 10px 0;
}

.breadcrumb-container .el-breadcrumb__item a {
  color: #409EFF;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb-container .el-breadcrumb__item a:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>